<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="inputName" />
    <button id="btn">提交</button>
    <script>
      //1、点击提交按钮，验证数据，
      //2、手机号码不对，则返回
      //3、手机号码正确，按钮禁用，内容修改为到倒计时
      var btn = document.getElementById('btn');
      var inputName = document.getElementById('inputName');
      var time = 5;
      var clock;
      //   btn.addEventListener('click', function () {
      //     var phone = inputName.value;
      //     var reg = /^1[3-9]\d{9}$/;
      //     if (reg.test(phone)) {
      //       btn.disabled = true;
      //      clock= setInterval(function () {
      //         time--;
      //         btn.innerText = time + '倒计时';
      //         if(time === 0){
      //         clearInterval(clock)
      //         btn.disabled = false;
      //         btn.innerText = '提交';
      //         time = 5
      //       }
      //       },1000);

      //     } else {
      //       alert('输入正确手机号码');
      // }
      //   });

      //第二种
      btn.addEventListener('click', function () {
        var phone = inputName.value;
        var reg = /^1\d{10}$/;
        if (!reg.test(phone)) {
          alert('请正确输入');
          return;
        }
        btn.disabled = true;
        clock = setInterval(function () {
          time--;
          btn.innerText = time + '倒计时';
          if (time === 0) {
            clearInterval(clock);
            btn.innerText = '提交';
            btn.disabled = false;
            time = 5;
          }
        }, 1000);
      });
    </script>
  </body>
</html>
